<template>
  <div>
    <a-form layout="horizontal">
      <div class="fold">
        <a-row>
          <slot name="less" />
        </a-row>
        <a-row v-show="more && enableMore">
          <slot name="more" />
        </a-row>
      </div>

      <span style="float: right; margin-top: 3px; margin-right: -15px" @click="toggleAdvanced">
        <a v-if="enableMore" style="margin-left: 8px">
          {{ more ? '收起' : '展开' }}
          <s-icon :type="more ? 'up-outlined' : 'down-outlined'" />
        </a>
      </span>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'SListForm',
  props: {
    enableMore: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  emits: ['change'],
  data() {
    return { more: false }
  },
  methods: {
    toggleAdvanced() {
      this.more = !this.more
      this.$emit('change', this.more)
    }
  }
}
</script>

<style lang="less" scoped>
.fold {
  display: inline-block;
  width: calc(100% - 40px);
}
</style>
